<template>
  <div>
    <div v-if="showFile" class="oss_file">
      <input
        v-if="multiple"
        :id="updataId"
        type="file"
        multiple
        :accept="accpetObj"
        @change="changepic"
      />
      <input
        v-else
        :id="updataId"
        type="file"
        :accept="accpetObj"
        @change="changepic"
      />
    </div>
  </div>
</template>
<script>
export default {
  props: {
    updataId: {
      type: String,
      default: () => {
        return String(new Date().getTime() + Math.floor(Math.random() * 100000))
      }
    },
    multiple: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    accpetObj: {
      type: [String],
      default: () => {
        return '*'
      }
    },
    vedioArr: {
      type: Array,
      default: () => {
        return []
      }
    },
    limit: {
      type: Number,
      default: () => {
        return 1
      }
    },
    filePath: {
      type: String,
      default: () => {
        return 'whatBottle/'
      }
    }
  },
  data () {
    return {
      visible: false,
      vedioUrl: '',
      nowVedio: [],
      showFile: true
    }
  },
  watch: {
    vedioArr (list) {
      this.nowVedio = this.vedioArr
    }
  },
  mounted () {
    this.nowVedio = this.vedioArr
  },
  methods: {
    // 图片位置调整
    vedioEnd (e) {
      this.$emit('updata', this.nowVedio)
    },
    changepic () {
      const obj = document.getElementById(this.updataId)
      const vedioArr = []

      for (const item of obj.files) {
        const url = this.getObjectURL(item)
        if (item.size >= 52428800) {
          this.$message({ message: '上传文件需小于50MB', type: 'error' })
          continue
        }
        if (~item.type.indexOf('image')) {
          this.getBase64(item).then(imgBase64 => {
            vedioArr.push({
              url,
              imgBase64,
              files: item
            })
            this.$emit('updata', vedioArr)
          })
        } else {
          vedioArr.push({
            files: item,
            url
          })
          this.$emit('updata', vedioArr)
        }
      }
      document.getElementById(this.updataId).value = ''

      this.showFile = false
      setTimeout(() => {
        this.showFile = true
      }, 100)
    },
    // 获取blob
    getObjectURL (file) {
      var url = null
      if (window.createObjectURL != undefined) {
        // basic
        url = window.createObjectURL(file)
      } else if (window.URL != undefined) {
        // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL != undefined) {
        // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    // 获取base64
    getBase64 (item) {
      return new Promise((a, b) => {
        var reader = new FileReader()
        reader.onload = e => {
          a(reader.result)
        }
        reader.readAsDataURL(item)
      })
    },
    // 随机生成文件名
    random_string (len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    // 删除更多
    handleRemove (index) {
      this.vedioArr.splice(index, 1)
    },
    // 查看大图
    handleView (url) {
      this.$emit('see', url)
      this.vedioUrl = url
      this.visible = true
    }
  }
}
</script>
<style type="text/css">
.oss_file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer !important;
}
.oss_file input {
  cursor: pointer !important;
  right: 0;
  top: 0;
  opacity: 0;
  filter: alpha(opacity=0);
  cursor: pointer;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
}
.cenFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
